<template>
    <div class='tabs-view-container'>
        <router-link class="tabs-view"  to="tag.path" key="tag.path">
            <el-tag :closable="true" type="primary" @close='closeViewTabs()'>
                1111
            </el-tag>
        </router-link>
    </div>
</template>

<script>
  export default {
    computed: {
      visitedViews() {
        return this.$store.state.app.visitedViews.slice(-6)
      }
    },
    methods: {
      closeViewTabs(view, $event) {
        this.$store.dispatch('delVisitedViews', view).then((views) => {
          if (this.isActive(view.path)) {
            const latestView = views.slice(-1)[0]
            if (latestView) {
              this.$router.push(latestView.path)
            } else {
              this.$router.push('/')
            }
          }
        })
        $event.preventDefault()
      },
      generateRoute() {
        if (this.$route.name) {
          return this.$route
        }
        return false
      },
      addViewTabs() {
        const route = this.generateRoute()
        if (!route) {
          return false
        }
        this.$store.dispatch('addVisitedViews', this.generateRoute())
      },
      isActive(path) {
        return path === this.$route.path
      }
    },
    watch: {
      $route() {
        this.addViewTabs()
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
    .tabs-view-container {
        display: inline-block;
        vertical-align: top;
        margin-left: 10px;
        .tabs-view {
            margin-left: 10px;
        }
    }
</style>
